// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, InteractionManager } from 'react-native';
import * as ActionTypes from '../../constants/constants.js';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/Ionicons';

// antd 按需加载
import { Tabs, Toast, Portal } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { myTeam } from '../../module/module.js'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar, RefreshScrollView, Layout, LoadingData, Results } from '../../components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { pathHead, press, size, ScreenWidth, borderBottom, hotTextColor, defaultDataList, onEndReached, onRefresh, concatDataList, defaultPage } from '../../util/utils.js'
class Team extends Component {

  constructor(props) {
    super(props)
    this.state = {
      refreshing: false,
      data: {
        one: [],
        two: []
      }
    }
  }

  componentDidMount() {

    InteractionManager.runAfterInteractions(() => {
      // ...耗时较长的同步的任务...
      this.showLoadingData()
    });
  }

  showLoadingData(options) {
    this.loading = Toast.loading('加载中', 0)
    this.loadingData(options).then(res => {
      this.setState({
        data: res[0].data
      })
    }).finally(() => {
      Portal.remove(this.loading)
    })
  }

  loadingData(options) {
    return Promise.all([myTeam(options)])
  }

  onRefresh = () => {
    this.setState({ refreshing: true });
    this.loadingData().then(res => {
      this.setState({
        data: res[0].data
      })
    }).finally(() => {
      this.setState({
        refreshing: false
      })
    })
  }

  render() {
    const { refreshing, data } = this.state
    console.log(data)
    return (
      <Layout
        style={{ backgroundColor: '#fff' }}
        header={<Status />}
      // footer={}
      >
        <NavBar
          title="我的团队"
          back={true}
        />
        <RefreshScrollView
          style={Style.content}
          refreshing={refreshing}
          onRefresh={this.onRefresh}
        >
          <View style={{ padding: 15 }}>
            <Text style={{ fontSize: 12, color: '#61676F', lineHeight: 16, }}>一级团队</Text>
          </View>
          <View style={{}}>
            {data.one.map((item, index) => {
              return (
                <View
                  key={index}
                  style={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    padding: 15,
                    backgroundColor: '#fff',
                    ...borderBottom()
                  }}>
                  <Image resizeMode='cover' style={{ width: 36, height: 36, marginRight: 10, borderRadius: 18, overflow: 'hidden' }} source={{ uri: `${pathHead}${item.avatar}` }} />
                  <View style={{}}>
                    <Text style={{ fontSize: 16, color: '#61676F', lineHeight: 20, marginBottom: 5 }}>{item.nickname}</Text>
                    <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>推广{item.popularizeNum}人</Text>
                  </View>
                </View>
              )
            })}
            {data.one.length <= 0 && <Results type='data' width={size(500)} height={size(200)} />}
          </View>
          <View style={{ padding: 15 }}>
            <Text style={{ fontSize: 12, color: '#61676F', lineHeight: 16, }}>二级团队</Text>
          </View>
          <View style={{}}>
            {data.two.map((item, index) => {
              return (
                <View
                  key={index}
                  style={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    padding: 15,
                    backgroundColor: '#fff',
                    ...borderBottom()
                  }}>
                  <Image resizeMode='cover' style={{ width: 36, height: 36, marginRight: 10, borderRadius: 18, overflow: 'hidden' }} source={{ uri: `${pathHead}${item.avatar}` }} />
                  <View style={{}}>
                    <Text style={{ fontSize: 16, color: '#61676F', lineHeight: 20, marginBottom: 5 }}>{item.nickname}</Text>
                    <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>推广{item.popularizeNum}人</Text>
                  </View>
                  <View style={{}}>

                  </View>
                </View>
              )
            })}
            {data.two.length <= 0 && <Results type='data' width={size(500)} height={size(200)} />}
          </View>

        </RefreshScrollView>
      </Layout>
    );
  }
}


export default connect(({ user, }) => ({
  user,
}))(pureRender(Team))
